/**
 * @author Arian Stolwijk
 * This is the mootools translation of Modernizr 0.9 
 * This version is also released under the MIT license.
 * 
 */

// These are the original notes of the original author

/*
 * Modernizr JavaScript library 0.9
 * http://modernizr.com/
 *
 * Copyright (c) 2009 Faruk Ates
 * Licensed under the MIT license.
 * http://modernizr.com/license/
 *
 * Date: 2009-06-10 15:00:51 -0800 (Wed, 10 Jun 2009)
 */
/**
 *  Modernizr is a script that will detect various native CSS3 features
 *  available in the current UA and provide an object containing all
 *  features with a true/false value, depending on whether the UA has
 *  native support for it or not.
 *  
 *  In addition to that, Modernizr will add classes to the <body>
 *  element of the page, one for each cutting-edge feature. If the UA
 *  supports it, a class like "cssgradients" will be added. If not,
 *  the class name will be "no-cssgradients". This allows for simple
 *  if-conditionals in CSS styling, making it easily to have fine
 *  control over the look and feel of your website.
 *  
 *  @author     Faruk Ates
 *  @copyright  (2009) Faruk Ates.
 */


(function(){
	
	var m = new Element('mooModernizr');
	
	var prop, i, tmp;
	
	// Private funtion
	// Loop through all possible properties and see if we get a valid response at all
	checkProperties = function(prop){
		var i = 0;
		for (i in prop) {
			if ($defined(m.style[prop[i]])) {
				return prop[i];
			}
		}
		return false;		
	}
	
	$extend(Browser.Features,{
		
		canvas: !!new Element('canvas').getContext,
		
		rgba: (function(){
			// Set an rgba() color and check the returned value
			m.style.cssText = "background-color: rgba(150,255,150, .5)";
			return !!(m.style.backgroundColor.indexOf('rgba') !== -1);
		})(),
		
		hsla: (function(){
			// Same as rgba(), in fact, browsers re-map hsla() to rgba() internally
			m.style.cssText = "background-color: hsla(120,40%,100%, .5)";
			return !!(m.style.backgroundColor.indexOf('rgba') !== -1);
		})(),
		
		multiplebgs: (function(){
			// Setting multiple images and a color on the background shorthand property
			//  and then querying the style.background property value for the number of
			//  occurrences of "url(" is a reliable method for detecting ACTUAL support for this!
			m.style.cssText = "background: url(m.png), url(a.png), #f99 url(m.png);";
		
			// If the UA supports multiple backgrounds, there should be three occurrences
			//  of the string "url(" in the return value for elem.style.background
			tmp = m.style.background;
			i = 0;
			while (tmp.indexOf('url(') !== -1) {
				i++;
				tmp = tmp.substring(0, tmp.indexOf('url(')) + tmp.substring(tmp.indexOf('url(') + 4);
			}
			tmp = null;
			// If i==3 then the UA handled this correctly.
			return !!(i === 3);
		})(),
		
		borderimage: (function(){
			// 'prop" is a list of DOM properties we want to check against. We specify
			//  literally ALL possible (known and/or likely) properties on the element
			//  including the non-vendor prefixed one, for forward compatibility.
			prop = ['borderImage', 'webkitBorderImage', 'MozBorderImage', 'mozBorderImage', 'oBorderImage', 'msBorderImage'];
			m.style.cssText = "border-image: url(m.png) 1 1 stretch; -webkit-border-image: url(m.png) 1 1 stretch; -moz-border-image: url(m.png) 1 1 stretch; -o-border-image: url(m.png) 1 1 stretch; -ms-border-image: url(m.png) 1 1 stretch;";
			return checkProperties(prop);
		})(),
		
		borderradius: (function(){
			/**
			 *  See border-image for the explanations on the prop variable and the for loop
			 */
			prop = [
				'borderTopRightRadius', 
				'webkitBorderTopRightRadius', 
				'MozBorderTopRightRadius', 
				'mozBorderTopRightRadius', 
				'oBorderTopRightRadius', 
				'msBorderTopRightRadius',
				'mozBorderRadiusTopright',
				'MozBorderRadiusTopright'
			];
			m.style.cssText = "border-top-right-radius: 10px; "+
				"-webkit-border-top-right-radius: 10px; "+
				"-moz-border-top-right-radius: 10px; "+
				"-o-border-top-right-radius: 10px; "+
				"-ms-border-top-right-radius: 10px;"+
				"-moz-border-radius-topright: 10px";
			return checkProperties(prop);
		})(),
		
		boxshadow: (function(){
			/**
			 *  See border-image for the explanations on the prop variable and the for loop
			 */
			prop = ['boxShadow', 'webkitBoxShadow', 'MozBoxShadow', 'mozBoxShadow', 'oBoxShadow', 'msBoxShadow'];
			m.style.cssText = "box-shadow: #000 1px 1px 3px; -webkit-box-shadow: #000 1px 1px 3px; -moz-box-shadow: #000 1px 1px 3px; -obox-shadow: #000 1px 1px 3px; -ms-box-shadow: #000 1px 1px 3px;";
			return checkProperties(prop);
		})(),
		
		textshadow: (function(){
			/**
			 *  See border-image for the explanations on the prop variable and the for loop
			 */		
			prop = ['textShadow', 'webkitTextShadow', 'MozTextShadow', 'mozTextShadow', 'oTextShadow', 'msTextShadow'];
			m.style.cssText = "text-shadow: 1px 1px 3px #000; -webkit-text-shadow: 1px 1px 3px #000; -moz-text-shadow: 1px 1px 3px #000; -o-text-shadow: 1px 1px 3px #000; -ms-text-shadow: 1px 1px 3px #000;";
			return checkProperties(prop);
		})(),
		
		opacity: (function(){
			// Browsers that actually have CSS Opacity implemented have done so
			//  according to spec, which means their return values are within the
			//  range of [0.0,1.0] - including the leading zero.
			m.style.cssText = "opacity: .5;";
			return !!(m.style.opacity.indexOf('0.5') !== -1);
		})(),
		
		cssanimations: (function(){
			/**
			 *  See border-image for the explanations on the prop variable and the for loop
			 */		
			prop = ['animationName', 'webkitAnimationName', 'MozAnimationName', 'mozAnimationName', 'oAnimationName', 'msAnimationName'];
			m.style.cssText = "animation: 'animate' 2s ease 2; -webkit-animation: 'animate' 2s ease 2; -moz-animation: 'animate' 2s ease 2; -o-animation: 'animate' 2s ease 2; -ms-animation: 'animate' 2s ease 2; position:relative;";
			return checkProperties(prop);
		})(),
		
		csscolumns: (function(){
			/**
			 *  See border-image for the explanations on the prop variable and the for loop
			 */
			prop = ['columnCount', 'webkitColumnCount', 'MozColumnCount', 'mozColumnCount', 'oColumnCount', 'msColumnCount'];
			m.style.cssText = "column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -ms-column-count: 3;";
			return checkProperties(prop);
		})(),
		
		cssgradients: (function(){
			/**
			 *  For CSS Gradients syntax, please see:
			 *  http://webkit.org/blog/175/introducing-css-gradients/
			 */
			m.style.cssText = "background-image: gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -webkit-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -moz-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -o-gradient(linear, left top, right bottom, from(#9f9), to(white)); background-image: -ms-gradient(linear, left top, right bottom, from(#9f9), to(white));";
			return !!(m.style.backgroundImage.indexOf('gradient') !== -1);
			
		})(),
		
		cssreflections: (function(){
			/**
			 *  See border-image for the explanations on the prop variable and the for loop
			 */
			prop = ['boxReflect', 'webkitBoxReflect', 'MozBoxReflect', 'mozBoxReflect', 'oBoxReflect', 'msBoxReflect'];
			m.style.cssText = "box-reflect: right 1px; -webkit-box-reflect: right 1px; -moz-box-reflect: right 1px; -o-box-reflect: right 1px; -ms-box-reflect: right 1px;";
			return checkProperties(prop);
		})(),
		
		csstransforms: (function(){
			/**
			 *  See border-image for the explanations on the prop variable and the for loop
			 */
			prop = ['transformProperty', 'webkitTransform', 'MozTransform', 'mozTransform', 'oTransform', 'msTransform'];
			m.style.cssText = "transform: rotate(3deg); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg);";
			return checkProperties(prop);
		})(),
		
		csstransitions: (function(){
			/**
			 *  See border-image for the explanations on the prop variable and the for loop
			 */
			prop = ['transitionProperty', 'webkitTransitionProperty', 'MozTransitionProperty', 'mozTransitionProperty', 'oTransitionProperty', 'msTransitionProperty'];
			m.style.cssText = "transition: all .5s linear; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -o-transition: all .5s linear; -ms-transition: all .5s linear;";
			return checkProperties(prop);
		})(),
		
		
		// The idea is taken from the Mediawiki OggHandler extension
		// http://svn.wikimedia.org/svnroot/mediawiki/trunk/extensions/OggHandler/OggPlayer.js
		// Media wiki extension page: http://www.mediawiki.org/wiki/Extension:OggHandler
		
		// actually, you should use the tag content as backup (<video>.. your backup html (flash player) ..</video>
	
		// Firefox, Safari						Opera
		video: typeof HTMLVideoElement == 'object' || typeof HTMLVideoElement == 'function',
		
				// Firefox, Safari						Opera
		audio: typeof HTMLAudioElement == 'object' || typeof HTMLAudioElement == 'function',
		
		query: !!(document.querySelector),
		
		json: !!(window.JSON)
			
	});

	m.style.cssText = "";
	tmp = i = prop = null;

})();

